<template>
    <div class="todo-item">
        <div :class="{'completed': con.completed}">
            <input type="checkbox" v-model.lazy="con.completed"/>
            <label>{{con.content}}</label>
            <button @click="deleteHandle(con.id)"></button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'TodoItem',
    props: ['con'],
    data() {
        return {
            flag: false
        }
    },
    methods: {
        // 删除
        deleteHandle(id) {
            this.$emit('deleteWork', id)
        }
    }
}
</script>

<style lang="less" scoped>
@import '~css/theme.less';
.todo-item {
    div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        &.completed {
            label {
                color: #d9d9d9;
                text-decoration: line-through;
            }
        }
    }
    padding: 10px;
    border-top: 1px solid rgba(0, 0, 0, .1);
    &:hover {
        button::after {
            content: 'x';
            font-size: 24px;
            color: @red;
        }
    }
    input {
        outline: none;
        border: none;
        width: 50px;
        height: 30px;
        appearance: none;
        &::after {
            content: url('~images/yuan.svg');
        }
        &:checked::after {
            content: url('~images/check.svg');
        }
    }
    label {
        flex: 1;
        font-size: 24px;
        transition: color .1s;
    }
    button {
        appearance: none;
        border: none;
        outline: none;
        width: 40px;
        background-color: transparent;
        cursor: pointer;
    }
}
</style>